<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head th:include="include::header"></head>
<body class="gray-bg">
	<div class="wrapper wrapper-content animated fadeInRight">
		<div class="row">
			<div class="col-sm-12">
				<div class="ibox float-e-margins">
					<div class="ibox-content">
						<input id="pageType" th:value="${pageType}"  type="hidden">
						<form class="form-horizontal m-t" id="signupForm">
							<input id="id" name="id" type="hidden" th:value="${role.id}">
							<input id="menuIds" name="menuIds" type="hidden">
							<div class="form-group">
								<label class="col-sm-3 control-label">角色名：</label>
								<div class="col-sm-8">
									<input id="roleName" name="roleName" class="form-control"
										type="text" th:value="${role.roleName}">
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label">权限范围标识：</label>
								<div class="col-sm-8">
									<select  class="form-control" id="roletype" name="roletype">
										<option  th:selected="${role.roletype eq c.key}" th:each="c:${application.jyrc_roletype_}"  th:value="${c.key}" th:text="${c.value}" ></option>
									</select>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label">角色所属系统：</label>
								<div class="col-sm-8">
									<select  class="form-control" id="rolefrom" name="rolefrom">
										<option  th:selected="${role.rolefrom eq c.key}" th:each="c:${application.jyrc_rolefrom_}"  th:value="${c.key}" th:text="${c.value}" ></option>
									</select>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label">备注：</label>
								<div class="col-sm-8">
									<input id="remark" name="remark" class="form-control"
										type="text" th:value="${role.remark}">
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label">菜单权限：</label>
								<div class="col-sm-8">
									<div id="menuTree"></div>
								</div>
							</div>

							<div class="form-group">
								<div class="col-sm-8 col-sm-offset-3">
									<button type="submit" class="btn btn-primary">提交</button>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div th:include="include::footer"></div>
	<script type="text/javascript">
        var menuIds;
        $(function() {
            var pageType = $('#pageType').val();
            if('save'==pageType){//新增页面
                getMenuTreeDataAdd();
                validateRule();

            }else if('update'==pageType){//修改页面
                getMenuTreeDataUp();
                validateRule();

            }else{
                parent.layer.msg("页面参数错误");
            }


        });

        $.validator.setDefaults({
            submitHandler : function() {
                getAllSelectNodes();
                save();
            }
        });

        function getAllSelectNodes() {
            var ref = $('#menuTree').jstree(true); // 获得整个树
            menuIds = ref.get_selected(); // 获得所有选中节点的，返回值为数组
            $("#menuTree").find(".jstree-undetermined").each(function(i, element) {
                menuIds.push($(element).closest('.jstree-node').attr("id"));
            });
            console.log(menuIds);
        }

        function getMenuTreeDataUp() {
            var id = $('#id').val();
            $.ajax({
                type : "GET",
                url : "/sys/menu/tree/" + id,
                success : function(menuTree) {
                    $('#menuTree').jstree({
                        "plugins" : [ "wholerow", "checkbox" ],
                        'core' : {
                            'data' : menuTree
                        },
                        "checkbox" : {
                            //"keep_selected_style" : false,
                            //"undetermined" : true
                            //"three_state" : false,
                            //"cascade" : ' up'
                        }
                    });
                    $('#menuTree').jstree('open_all');
                }
            });
        }

        function getMenuTreeDataAdd() {
            $.ajax({
                type : "GET",
                url : "/sys/menu/tree",
                success : function(menuTree) {
                    $('#menuTree').jstree({
                        "plugins" : [ "wholerow", "checkbox" ],
                        'core' : {
                            'data' : menuTree
                        },
                        "checkbox" : {
                            "three_state" : true
                        }

                    });
                    //$('#menuTree').jstree("open_all");
                }
            });
        }

        function save() {
            $('#menuIds').val(menuIds);
            var role = $('#signupForm').serialize();
            $.ajax({
                cache : true,
                type : "POST",
                url : "/sys/role/"+$('#pageType').val(),
                data : role, // 你的formid
                async : false,
                error : function(request) {
                    alert("Connection error");
                },
                success : function(r) {
                    if (r.code == 0) {
                        parent.layer.msg(r.msg);
                        $(window.parent.document).find('.J_iframe').each(function () {
                            if ($(this).data('id') == "/sys/role") {//common/sysDict为打开的frame id
                                this.contentWindow.reLoad();
                                return false;
                            }
                        });
                        var index = parent.layer.getFrameIndex(window.name); // 获取窗口索引
                        parent.layer.close(index);

                    } else {
                        parent.layer.msg(r.msg);
                    }

                }
            });
        }

        function validateRule() {
            var icon = "<i class='fa fa-times-circle'></i> ";
            $("#signupForm").validate({
                rules : {
                    roleName : {
                        required : true
                    }
                },
                messages : {
                    roleName : {
                        required : icon + "请输入角色名"
                    }
                }
            });
        }
	</script>
</body>

</html>
